<v-app>
  <v-speed-dial v-model="menu" fixed top right direction="bottom" style="user-select: none;">
    <template v-slot:activator>
      <v-btn
        @click.native.stop.prevent="menu=!menu"
        @touchstart.native.stop.prevent="menu=!menu"
        fab
        color="primary"
        :style="{width:size+'px', height:size+'px'}"
      >
        <v-icon v-if="menu" :size="size * 0.6">close</v-icon>
        <v-icon v-else :size="size * 0.6">menu</v-icon>
      </v-btn>
    </template>
    <v-btn
      fab
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/'"
      @touchstart.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/'"
    >
      <v-icon :size="size * 0.55" color="primary">games</v-icon>
    </v-btn>
    <v-btn
      fab
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="tune=true;menu=false;"
      @touchstart.native.stop.prevent="tune=true;menu=false;"
    >
      <v-icon :size="size * 0.55" color="primary">tune</v-icon>
    </v-btn>
    <v-btn
      fab
      :color="cuber.mirror?'primary':''"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="cuber.mirror=!cuber.mirror;"
      @touchstart.native.stop.prevent="cuber.mirror=!cuber.mirror;"
    >
      <v-icon :size="size * 0.55" :color="cuber.mirror?'':'primary'">flip</v-icon>
    </v-btn>
    <v-btn
      fab
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
      @touchstart.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
    >
      <v-icon :size="size * 0.55" color="primary">code</v-icon>
    </v-btn>
  </v-speed-dial>
  <div v-resize="resize" style="padding:0%;user-select: none;touch-action: none;">
    <div ref="cuber"></div>
    <div style="margin:0%;padding:0%;background-color:white;" :style="{width:width + 'px', height:'260px'}">
      <v-container
        fluid
        grid-list-md
        text-xs-center
        :style="{width:Math.min(width, height * 0.6) + 'px', 'margin-left': (width-Math.min(width, height * 0.6))/2 + 'px'}"
      >
        <v-layout row wrap>
          <v-flex xs12>
            <v-text-field
              style="text-transform:none;padding-left: 2%;padding-right: 2%;"
              dense
              class="title"
              single-line
              hide-details
              outlined
              :disabled="recording"
              :append-icon="scene == ''?'':'clear'"
              @click:append="scene = ''"
              v-model="scene"
              label="scene"
            >
            </v-text-field>
          </v-flex>
          <v-flex xs12>
            <v-text-field
              style="text-transform:none;padding-left: 2%;padding-right: 2%;"
              dense
              class="title"
              single-line
              hide-details
              outlined
              :disabled="recording"
              :append-icon="action == ''?'':'clear'"
              @click:append="action = ''"
              v-model="action"
              label="action"
            >
            </v-text-field>
          </v-flex>
          <v-flex xs12 style="padding-left: 5%; padding-right: 5%">
            <v-slider
              style="margin: 0%"
              readonly
              hide-details
              :thumb-label="progress!=0?'always':false"
              ticks="always"
              v-model="progress"
              :max="actions.length"
            >
              <template v-slot:thumb-label>{{progress==0?'#':actions[progress - 1].value}}</template>
            </v-slider>
          </v-flex>
          <v-flex xs12 style="display: flex; padding: 0%; margin: 0%;">
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="recording"
                @click.native.stop.prevent="colord=true"
                @touchstart.native.stop.prevent="colord=true"
                style="margin: 0%; padding: 0%;"
                :color="colors[color]"
              >
                <v-icon large>colorize</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="recording"
                @click.native.stop.prevent="quality=true"
                @touchstart.native.stop.prevent="quality=true"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>crop</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="recording"
                @click.native.stop.prevent="share"
                @touchstart.native.stop.prevent="share"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>share</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="recording"
                @click.native.stop.prevent="snap"
                @touchstart.native.stop.prevent="snap"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>camera_alt</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="action == ''"
                @click.native.stop.prevent="film"
                @touchstart.native.stop.prevent="film"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>{{recording?'stop':'videocam'}}</v-icon>
              </v-btn>
            </v-flex>
          </v-flex>
          <v-flex xs12 style="display: flex; padding: 0%; margin: 0%;">
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="(progress==0 && cuber.cube.history.length == 0) || recording"
                @click.native.stop.prevent="init"
                @touchstart.native.stop.prevent="init"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>skip_previous</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="progress==0 || recording"
                @click.native.stop.prevent="backward"
                @touchstart.native.stop.prevent="backward"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>fast_rewind</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="progress == actions.length"
                @click.native.stop.prevent="toggle"
                @touchstart.native.stop.prevent="toggle"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>{{playing?'pause':'play_arrow'}}</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="progress==actions.length || recording"
                @click.native.stop.prevent="forward"
                @touchstart.native.stop.prevent="forward"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>fast_forward</v-icon>
              </v-btn>
            </v-flex>
            <v-flex>
              <v-btn
                block
                text
                large
                :disabled="(progress==actions.length) || recording"
                @click.native.stop.prevent="end"
                @touchstart.native.stop.prevent="end"
                style="margin: 0%; padding: 0%;"
              >
                <v-icon large>skip_next</v-icon>
              </v-btn>
            </v-flex>
          </v-flex>
        </v-layout>
      </v-container>
    </div>
  </div>
  <tune v-model="tune"></tune>
  <v-bottom-sheet v-model="quality">
    <v-card flat style="margin: auto;touch-action: none;user-select: none;" :style="{width:Math.min(width, height * 0.6) + 'px'}">
      <v-container fluid grid-list-md text-xs-center>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="pixel" always-dirty thumb-label="always" max="1024" min="128" step="128" label="像素"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="duration" always-dirty thumb-label="always" max="60" min="10" step="10" label="帧数"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="delay" always-dirty thumb-label="always" max="10" min="2" step="1" label="帧率">
            <template v-slot:thumb-label>{{Math.round(100/delay)}}</template>
          </v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-flex xs6>
            <v-btn block @click.native.stop.prevent="quality=false;" @touchstart.native.stop.prevent="quality=false;" outlined color="primary">
              确定
            </v-btn>
          </v-flex>
          <v-flex xs6>
            <v-btn
              block
              @click.native.stop.prevent="pixel=512;duration=30;delay=2;"
              @touchstart.native.stop.prevent="pixel=512;duration=30;delay=2;"
              outlined
              color="error"
            >
              重置
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
  <v-bottom-sheet v-model="colord">
    <v-card flat style="margin: auto;touch-action: none;user-select: none;" :style="{width:Math.min(width, height * 0.6) + 'px'}">
      <v-container fluid grid-list-md text-xs-center>
        <v-layout row wrap>
          <v-flex v-for="(item, index) in colors" xs2>
            <v-btn
              @click.native.stop.prevent="colord = false; color = index;"
              @touchstart.native.stop.prevent="colord = false; color = index;"
              :color="item"
              block
              depressed
              class="headline"
              style="height:2em; min-width: 0%; min-height: 0%; margin: 0%;"
            >
            </v-btn>
          </v-flex>
          <v-flex xs2>
            <v-btn
              @click.native.stop.prevent="clear"
              @touchstart.native.stop.prevent="clear"
              block
              text
              class="headline"
              style="height: 2em; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;"
            >
              <v-icon large color="red">replay</v-icon>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
  <v-dialog v-model="shared">
    <v-card flat style="margin: auto;">
      <v-card-title style="word-break: break-all;"><v-textarea readonly solo flat v-model="link"></v-textarea></v-card-title>
    </v-card>
  </v-dialog>
</v-app>
